<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/pro/css/buy/cart2.e3e13dad.css">
    <script src="../js/vue.js"></script>
    <style>
        body {
            padding: 10px;
        }

        .checkbox {
            display: inline-block;

        }

        .checkbox .iconfont {
            display: block;
            font-style: normal;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            border: 1px solid #e0e0e0;
            user-select: none;
            color: #fff;
        }

        .checkbox .iconfont:hover {
            color: #757575;
        }

        .checkbox input:checked+.iconfont {
            background-color: #ff6700;
            border-color: #ff6700;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-color></my-color>

        <my-article>
            <template #header="slotHeaderData">
                {{slotHeaderData.title}}---{{slotHeaderData.a}}---{{slotHeaderData.b}}
            </template>
            <template v-slot:default="slotContentData">
                {{slotContentData.content}}
            </template>
            <template #footer="slotFooterData">
                {{slotFooterData.time}}---{{slotFooterData.x}}---{{slotFooterData.y}}
            </template>
        </my-article>
        <hr>
        <my-article>
            <template #header="{title,a,b}">
                {{title}}---{{a}}---{{b}}
            </template>

            <template #default="{content}">
                {{content}}
            </template>

            <template #footer="{time,x,y}">
                {{time}}---{{x}}---{{y}}
            </template>
        </my-article>
    </div>
</body>
<template id="myColor">
    <div>
        <input type="color" :value="getColor()" @input="setColor($event.target.value)">
    </div>
</template>

<template id="myArticle">
    <div class="article" :style="{color:getColor(),width:'400px'}">
        <div class="header">
            <!-- name属性  插槽的名称 -->
            <!-- title属性  插槽的prop -->
            <slot name="header" :title="article.title" :a="1" :b="2">{{article.title}}</slot>

            <!-- 插槽作用域原理: 作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里： -->
            <!-- function(slotHeaderData) {
                    <template v-slot:header="{title,a,b}=slotHeaderData">
                        {{slotHeaderData.title}}---{{slotHeaderData.a}}---{{slotHeaderData.b}}
                    </template>
            }-->

        </div>
        <div class="main">
            <!--  如果没有添加name属性  默认name="default" -->
            <slot :content="article.content">{{article.content}}</slot>
        </div>
        <div class="footer">
            <slot name="footer" :time="article.time" :x="10" :y="20">
                {{article.time}}
            </slot>
        </div>
    </div>
</template>

<script>


    // 插槽作用域
    // 目的: 插槽作用域的目的:让父组件的插槽内容,对应插槽名称访问子组件中的数据 

    // 1. 子组件定义插槽时,可以给插槽<slot></slot> 绑定name属性和插槽prop(需要向父组件传递的数据)
    // <slot name="header" :title="article.title" :a="1" :b="2">{{article.title}}</slot>

    // 2. 父组件使用子组件时，需要在template中对应插槽名称接收数据, 再配置插槽内容
    //  <template v-slot:header="slotHeaderData">    对应插槽名称接收数据
    //         {{ slotHeaderData.title }}---{{ slotHeaderData.a }}---{{ slotHeaderData.b }}  配置插槽的内容
    //  </template>

    //  v-solt: 可以简写为#
    //  v-slot:header="slotHeaderData"      =>  #header="slotHeaderData"
    //  v-slot:header = "{title,a,b}"       =>  #header = "{title,a,b}"


    // 非父子组件之间的通信

    Vue.component("my-color", {
        data() {
            return {
                // 注意: 颜色不能简写
                // color: "#666666"
            }
        },
        template: "#myColor",
        inject: ["getColor", "setColor"],
    })
    Vue.component("my-article", {
        data() {
            return {
                // 子组件的数据
                article: {
                    title: "Vue初识",
                    content: `Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
                的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动`,
                    time: "2023/2/6"
                }
            }
        },
        template: "#myArticle",
        watch: {
            color(newVal) {
                console.log("color发生改变", newVal);
            }
        },
        inject: ["getColor"],
    })


    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            bool: true,
            color: "#000000",
        },
        provide() {
            return {
                getColor: () => this.color,
                setColor: (v) => this.color = v,
            }
        }
    })

</script>

</html>